<template>
  <div>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="工单信息" name="1">
        <FormPanel ref="formpanel" :list="formList" formType="add" labelWidth="100" :isSubmitBtn="false" :rows="4" @formChange="formchangeFun" />
      </el-collapse-item>
    </el-collapse>

    <!-- <el-tabs v-model="tabName" @tab-click="handleClick">
      <el-tab-pane label="维修项目" name="first"></el-tab-pane>
      <el-tab-pane label="维修材料" name="second"></el-tab-pane>
      <el-tab-pane label="销售材料" name="third"></el-tab-pane>
      <el-tab-pane label="附加项目" name="fourth"></el-tab-pane>
    </el-tabs>-->
    <!-- <SettlementTables :type="tabName" :getdata="getdata" @close="closepop"></SettlementTables> -->
    <!-- <LazyLoadTab v-model="activeName" :tabMenus="menus"></LazyLoadTab> -->
    <BreakSpace label="维修项目"></BreakSpace>
    <firsttable type="first" :getdata="{ RO_NO: this.getdata.RO_NO }" />
    <BreakSpace label="预估备件"></BreakSpace>
    <secondtable type="second" :getdata="{ RO_NO: this.getdata.RO_NO }" />
    <BreakSpace label="附加项目"></BreakSpace>
    <fourthtable type="fourth" :getdata="{ RO_NO: this.getdata.RO_NO }" />
    <!-- <div style="height:50px;"></div> -->
    <div
      :style="{
        position: 'absolute',
        left: 0,
        bottom: 0,
        right: 0,
        zIndex: 9,
        borderTop: '1px solid #e9e9e9',
        padding: '10px 20px',
        background: '#fff',
        textAlign: 'right'
      }"
    >
      <!-- <el-button @click="closeDrawer(1)">打印工单</el-button> -->
      <el-button @click="closeDrawer(3)">取消</el-button>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from 'vuex';
import dictCode from '@/utils/dictCode';
import moment from 'moment';
import { dictionary } from '@/utils/dictMixin';
import SettlementTables from './settlementTables.vue';
import { getDealerUser } from '@/api/customerRepair/customerComplaint/customerComplaintReception';
import { getmaintainProjectTable, getaccountdetail, getfindAllRepairType } from '@/api/repair/business/customer/history';
import firsttable from './firsttable';
import secondtable from './secondtable';
import fourthtable from './fourthtable';

export default {
  name: 'zjjobdetal',
  components: {
    SettlementTables,
    firsttable,
    secondtable,
    fourthtable
  },
  mixins: [dictionary],
  props: ['getdata'],
  data() {
    return {
      activeNames: '1',
      activeNameNews: '1',
      tabName: 'first',
      formList: this.createFrom(),
      tableVisible: false,
      fetchParams: { RO_NO: this.getdata.RO_NO },
      detailParams: { RO_NO: this.getdata.RO_NO },
      activeName: '维修项目',
      menus: [
        {
          title: '维修项目',
          path: 'repair/business/customer/Repairhistory/Detailed/firsttable',
          params: {
            type: 'first',
            getdata: { RO_NO: this.getdata.RO_NO }
          }
        },
        {
          title: '预估备件',
          path: 'repair/business/customer/Repairhistory/Detailed/secondtable',
          params: {
            type: 'second',
            getdata: { RO_NO: this.getdata.RO_NO }
          }
        },
        // {
        //   title: '销售材料',
        //   path: 'repair/business/customer/Repairhistory/Detailed/thirdtable',
        //   params: {
        //     type: 'third',
        //     getdata: { RO_NO: this.getdata.RO_NO }
        //   }
        // },
        {
          title: '附加项目',
          path: 'repair/business/customer/Repairhistory/Detailed/fourthtable',
          params: {
            type: 'fourth',
            getdata: { RO_NO: this.getdata.RO_NO }
          }
        }
      ]
    };
  },
  created() {},
  mounted() {
    this.getEmp();
    this.getRepairType();
    this.getdetail();
  },
  methods: {
    createFrom() {
      return [
        {
          type: 'INPUT',
          label: '工单号',
          fieldName: 'RO_NO',
          disabled: true
        },
        {
          type: 'INPUT',
          label: '车牌号',
          fieldName: 'LICENSE',
          disabled: true
        },
        {
          type: 'INPUT',
          label: 'VIN',
          fieldName: 'VIN',
          disabled: true
        },
        // {
        //   type: 'INPUT',
        //   label: '发动机号',
        //   fieldName: 'ENGINE_NO',
        //   disabled: true
        // },
        // // {
        // //   type: 'SELECT',
        // //   label: '工单类型',
        // //   fieldName: 'RO_TYPE',
        // //   itemList: this.createDictList('8068'),
        // //   disabled: true
        // // },
        // {
        //   type: 'SELECT',
        //   label: '维修类型',
        //   fieldName: 'REPAIR_TYPE_CODE',
        //   itemList: [],
        //   disabled: true
        // },
        {
          type: 'SELECT',
          label: '服务顾问',
          fieldName: 'SERVICE_ADVISOR',
          itemList: [],
          disabled: true
        },
        // {
        //   type: 'DATE_TIME',
        //   label: '开单日期',
        //   fieldName: 'RO_CREATE_DATE',
        //   disabled: true
        // },
        // {
        //   type: 'INPUT',
        //   label: '进厂里程',
        //   fieldName: 'IN_MILEAGE',
        //   disabled: true
        // },
        // {
        //   type: 'INPUT',
        //   label: '出厂里程',
        //   fieldName: 'OUT_MILEAGE',
        //   disabled: true
        // },
        // {
        //   type: 'DATE',
        //   label: '上牌日期',
        //   fieldName: 'LICENSE_DATE',
        //   disabled: true
        // },
        // {
        //   type: 'INPUT',
        //   label: '送修人姓名',
        //   fieldName: 'IN_MILEAGE',
        //   disabled: true
        // },
        // {
        //   type: 'INPUT',
        //   label: '送修人电话',
        //   fieldName: 'DELIVERER',
        //   disabled: true
        // },
        // {
        //   type: 'INPUT',
        //   label: '送修人手机',
        //   fieldName: 'DELIVERER_MOBILE',
        //   disabled: true
        // },
        // {
        //   type: 'INPUT',
        //   label: '估价单号',
        //   fieldName: 'ESTIMATE_NO',
        //   disabled: true
        // },
        // {
        //   type: 'INPUT',
        //   label: '车主',
        //   fieldName: 'OWNER_NAME',
        //   selfCols: 1.5,
        //   disabled: true
        // },
        // {
        //   type: 'DATE_TIME',
        //   label: '预交车时间',
        //   fieldName: 'END_TIME_SUPPOSED',
        //   selfCols: 1.5,
        //   disabled: true
        // },
        // {
        //   type: 'TEXT_AREA',
        //   label: '检查结果',
        //   fieldName: 'CUSTOMER_DESC',
        //   selfCols: 1.5,
        //   disabled: true
        // },
        // {
        //   type: 'TEXT_AREA',
        //   label: '送修问题',
        //   fieldName: 'RO_TROUBLE_DESC',
        //   selfCols: 1.5,
        //   disabled: true
        // }
      ];
    },
    formchangeFun(val) {},
    closepop(val) {
      this.tableVisible = false;
    },
    handleClick(val) {},
    formchangesFun(val) {},
    // 获取维修类型
    async getRepairType() {
      const res = await getfindAllRepairType();
      let list = res.data.map(x => ({ text: x.REPAIR_TYPE_NAME, value: x.REPAIR_TYPE_CODE + '' }));
      this.formList.find(item => item.fieldName === 'REPAIR_TYPE_CODE').itemList = list; // 维修类型
    },
    async getdetail() {
      let that = this;
      let res = await getaccountdetail(this.detailParams);
      if (res.resultCode != 200) {
        this.$message.error('查询维修明细失败');
        return;
      }
      res.data.END_TIME_SUPPOSED = moment(res.data.END_TIME_SUPPOSED).format('YYYY-MM-DD HH:mm:ss');
      res.data.LICENSE_DATE = moment(res.data.LICENSE_DATE).format('YYYY-MM-DD HH:mm:ss');
      res.data.RO_CREATE_DATE = moment(res.data.RO_CREATE_DATE).format('YYYY-MM-DD HH:mm:ss');
      res.data.BALANCE_TIME = moment(res.data.BALANCE_TIME).format('YYYY-MM-DD HH:mm:ss');
      that.formList.forEach(x => {
        x.initialValue = res.data[x.fieldName];
      });
    },
    // 获取全部员工
    async getEmp() {
      const res = await getDealerUser();
      let empList = res.data.map(x => ({ text: x.employeeName, value: x.userId + '' }));
      this.formList.find(item => item.fieldName === 'SERVICE_ADVISOR').itemList = empList; // 服务专员
    },
    closeDrawer(type) {
      this.$emit('close', false);
    }
  }
};
</script>
